<template>
  <div class="org-page">
    <main>
      <div class="header">
        <p class="title">组织机构</p>
        <div class="search-container">
          <div class="search-input">
            <ul class="tabs">
              <li :class="orgType ? '' : 'active'" @click="tabChange('')">全部</li>
              <li :class="orgType === '1' ? 'active' : ''" @click="tabChange('1')">内部机构</li>
              <li :class="orgType === '2' ? 'active' : ''" @click="tabChange('2')">外部机构</li>
            </ul>
            <el-input placeholder="机构名称/机构简称" v-model="condition"></el-input>
            <el-button class="search-btn" type="primary" @click="handleSearch">
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary" @click="handleRefresh">
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="btns">
            <el-button v-if="hasTabAdd" type="primary" @click="handleAdd">
              新增机构
            </el-button>
          </div>
        </div>
      </div>
      <div class="table-container">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="id">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column prop="userName" label="机构名称">
            <template slot-scope="scope">
              <span v-if="hasTableLink" class="btn" @click="$router.push('/org-detail?id=' + scope.row.id)">
                {{ scope.row.orgName }}
              </span>
              <span v-else>{{ scope.row.orgName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orgAbbr" label="机构简称"></el-table-column>
          <el-table-column prop="orgIntro" label="机构简介" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column prop="action" label="操作" width="380">
            <template slot-scope="scope">
              <span style="display: none">{{ scope.row.userName }}</span>
              <el-button
                v-if="hasTableAdd"
                type="primary"
                size="small"
                @click="addChild(scope.row)">新增子级
              </el-button>
              <el-button
                v-if="hasTableMember"
                type="primary"
                size="small"
                @click="handleSet(scope.row)">成员
              </el-button>
              <el-button
                v-if="hasTableEdit"
                type="primary"
                size="small"
                @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button
                v-if="hasTableDel"
                type="danger"
                size="small"
                @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
      </div>
      <set-org
        :visible="visible"
        :type="type"
        :options="currentData"
        :parentsData="parentsData"
        :loading="loading"
        @cancel="visible = false"
        @submit="handleSave">
      </set-org>
      <set-member
        :visible="memberVisible"
        :orgId="orgId"
        @cancel="handleCancel">
      </set-member>
    </main>
  </div>
</template>

<script>
import setOrg from '@/components/corp/organization/setOrg';
import setMember from '@/components/corp/organization/setMember';

export default {
  components: {
    setOrg,
    setMember
  },
  data() {
    return {
      condition: '',
      orgType: '',
      hasSearch: false,
      tableData: [],
      tableLoading: false,
      importLoading: false,
      tmpLoading: false,
      // 设置机构
      loading: false,
      visible: false,
      type: '',
      currentData: {},
      parentsData: null,
      // 添加成员
      orgId: '',
      memberVisible: false
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.loading = false;
      }
    },
    orgType(val) {
      this.getTableData();
    }
  },
  created() {
    this.getTableData();
  },
  methods: {
    /**
     * 获取机构树
     */
    async getTableData() {
      const params = {
        orgType: this.orgType
      };
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getOrgTree(params);
      this.tableLoading = false;
      if (success) {
        this.tableData = data;
      }
    },
    // 切换类型
    tabChange(type) {
      this.orgType = type;
    },
    handleSearch() {
      this.hasSearch = true;
      this.getTableData();
    },
    handleRefresh() {
      this.hasSearch = false;
      this.getTableData();
    },
    // 新增子级
    addChild(row) {
      this.type = 'addChild';
      this.parentsData = { ...row };
      this.currentData = {};
      this.visible = true;
    },
    // 设置成员
    handleSet(row) {
      this.orgId = row.id;
      this.memberVisible = true;
    },
    // 取消
    handleCancel() {
      this.memberVisible = false;
      this.orgId = '';
    },
    // 新增
    handleAdd() {
      this.type = 'add';
      this.parentsData = null;
      this.currentData = {};
      this.visible = true;
    },
    // 编辑
    handleEdit(row) {
      this.type = 'edit';
      this.parentsData = null;
      this.currentData = { ...row };
      this.visible = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该机构, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delOrg({
          ids: row.id
        });
        if (success) {
          this.getTableData();
          this.$message.success('删除成功');
        }
      });
    },
    // 保存
    async handleSave(data) {
      const params = {
        ...this.currentData,
        ...data,
      };
      if (this.orgType) {
        params.orgType = this.orgType;
      }
      if (this.type === 'addChild') {
        params.parentId = this.parentsData.id;
      }
      this.loading = true;
      const { success } = this.type === 'add' || this.type === 'addChild'
        ? await this.$Model.addOrg(params)
        : await this.$Model.setOrg(params);
      this.loading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getTableData();
        this.visible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../assets/styles/table";
  @import "../../assets/styles/dialog";

  .org-page {
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    background-color: $baseBg;
    main {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: $mainBg;
      .header {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 20px;
        .title {
          font-size: 20px;
        }
        .search-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .search-input {
            display: flex;
            .tabs {
              display: flex;
              margin-right: 20px;
              box-shadow: 0 0 3px 0 $mainBg;
              li {
                width: 120px;
                background: #fff;
                color: rgba(0, 0, 0, .8);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: all .2s;
                &.active, &:hover {
                  background: $linearG;
                  color: #fff;
                }
                &:nth-child(1) {
                  border-radius: 5px 0 0 5px;
                }
                &:nth-last-child(1) {
                  border-radius: 0 5px 5px 0;
                }
              }
            }
            .el-input {
              width: 260px;
              margin-right: 20px;
            }
          }
        }
        .btns {
          .upload-file {
            position: relative;
            cursor: pointer;
            .file {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              opacity: 0;
              cursor: pointer;
            }
          }
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 100px);
        /deep/ .el-table {
          height: calc(100% - 50px);
          .el-table__body-wrapper {
            height: calc(100% - 40px);
            overflow-y: auto;
            .btn {
              color: $mainColor;
              cursor: pointer;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
</style>
